<template>
  <div class="dataManagement">
    <div class="card">
      <el-form label-width="80px">
        <el-form-item label="模板下载">
          <el-button
            size="mini"
            type="primary"
            @click="handleExportEnterprise">
            点击下载
          </el-button>
        </el-form-item>
        <el-form-item label="文件上传">
          <el-upload
            class="upload-demo"
            drag
            ref="fileUpload"
            :action="uploadFileUrl"
            :headers="headers"
            :multiple="false"
            :show-file-list="false"
            :before-upload="handleBeforeUpload"
            :on-error="handleUploadError"
            :on-success="handleUploadSuccess">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">
              <p class="attentionInfo">
                1、仅支持xlsx文件格式，文件条数不得超过50000条；
              </p>
              <p class="attentionInfo">
                2、上传表格时，需严格按照下载模式，根据模版表头的文字修改；
              </p>
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <el-alert
        v-if="resultParams.sum !== 0"
        show-icon
        :closable="false"
        type="success">
        <template #title>
          <span>本次导入数量{{resultParams.sum}}条</span>
        </template>
      </el-alert>
    </div>
  </div>
</template>
<script>
import {getToken} from "@/utils/auth";
export default {
  data() {
    return {
      //上传相关
      fileType: [ "xls", "xlsx" ],
      fileSize: 35,
      uploadFileUrl: "http://query.anjieke.cn/prod-api//enterprise/importDataManagement", // 上传文件服务器地址
      headers: { Authorization: "Bearer " + getToken() },
      resultParams: {
        sum: 0,
        id: undefined
      }
    }
  },
  methods: {
    // 上传前校检格式和大小
    handleBeforeUpload(file) {
      this.resultParams = { sum: 0, id: undefined }
      // 校检文件类型
      const fileName = file.name.split('.');
      const fileExt = fileName[fileName.length - 1];
      const isTypeOk = this.fileType.indexOf(fileExt) >= 0;
      if (!isTypeOk) {
        this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
        return false;
      }
      // 校检文件大小
      const isLt = file.size / 1024 / 1024 < this.fileSize;
      if (!isLt) {
        this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);
        return false;
      }
      this.$modal.loading("正在上传文件，请稍候...");
      return true;
    },
    // 上传失败
    handleUploadError(err) {
      this.$modal.msgError("上传文件失败，请重试");
      this.$modal.closeLoading()
      this.resultParams = { sum: 0, id: undefined }
    },
    // 上传成功回调
    handleUploadSuccess(res, file) {
      if (res.code === 200) {
        this.$modal.closeLoading();
        this.resultParams = { sum: res.data, id: undefined }
      } else {
        this.$modal.closeLoading();
        this.$modal.msgError(res.msg);
        this.$refs.fileUpload.handleRemove(file);
        this.resultParams = { sum: 0, id: undefined }
      }
    },
    handleExportEnterprise() {
      const params = { ...this.searchParams };
      this.download('/enterprise/templateManagement', params, `数据导入模版.xlsx`)
    },
  }
}
</script>
<style lang="scss" scoped>
div.card{
  padding: 14px;
  box-sizing: border-box;
  border-radius: 8px;
  background: #f1f8fe;
  p {
    height: 26px;
    line-height: 26px;
    margin: 0;
  }
}
</style>
